import React, { Fragment } from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import { Table, Card, Button,Divider ,Popconfirm,message,Spin} from 'antd';
import TemplateModal from './selectTempModal';
import styles from './index.less';

class Pagination extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      paginationProps: {
        current:1,
        showSizeChanger: true,
        showQuickJumper: false,
        showTotal: total => `共 ${total} 条记录`,
        pageSize: 10,
        total: 0,
      }, 
      loaded:false     
    };    
    this.columns = [
    {
        title: '模板名称',
        dataIndex: 'Name',
        key: 'Name',
        width: '25%',      
    },
    {
        title: '商品数量',
        dataIndex: 'ProductCount',
        key: 'ProductCount',
        width: '15%',
        align: 'right',
    },
    {
      title: '基本信息',
      dataIndex: 'DetailType',
      key: 'DetailType',
      width: '10%', 
      render:(val,record)=><span>{record.JsonData[0].detailType==2?'样式二':'样式一'}</span>   
    },
    {
      title: '商品规格',
      dataIndex: 'SpecificationsType',
      key: 'SpecificationsType',
      width: '10%',  
      render:(val,record)=><span>{record.JsonData[0].specificationsType==2?'展开版':'折叠版'}</span>    
    },
    {
        title: '创建时间',
        dataIndex: 'CreateTime',
        key: 'CreateTime',
        width: '20%',      
    },
    {
        title: '操作',
        width: '20%', 
        align: 'right',     
        render: data => {          
            return (
                <div>                                                 
                {
                    data.ProductCount>0?null:
                    <Fragment>                      
                      <Popconfirm placement="topRight" title={'确认删除？'} onConfirm={()=>this.confirm(data.Id)} okText="确认" cancelText="取消">
                        <a className={`${styles.brandColor} ${styles.pointer}`}>删除</a>
                      </Popconfirm>   
                      <Divider type="vertical" />                                       
                    </Fragment>
                  } 
                  <a
                    className={`${styles.brandColor} ${styles.pointer}`}
                    onClick={() => this.edit(data.Id)}
                >
                    编辑
                </a>                
                </div>
            );
        },
    },
    ];
  }
  componentWillMount() {   
    this.requestList();
    window.Isoption = false;
  }

  componentDidMount() {
    window.Isoption = true;
  }

  requestList = (pagination) => {
    const { dispatch } = this.props;
    dispatch({
        type:'productDetailTemplate/FindTemplateListWithPage',
        payload:{
            pageSize:pagination&&pagination.pageSize?pagination.pageSize:10,
            pageIndex:pagination&&pagination.current?pagination.current:1
        },
        callback:{
            success:(data)=>{
              this.setState({
                paginationProps:{...this.state.paginationProps,total:data.Data.Total},
                loaded:true
              })
            }
        }
    })
  }

  onChange = pagination => {    
    this.setState({
      paginationProps:{...pagination}
    },()=>{
      this.requestList(pagination);
    })
    
  };
  selectTempModal = ref => {
      this.selectTemplateModal=ref;
  }

  addTemplate = () => {
    this.selectTemplateModal.showModal();     
  };

  confirm = (id) =>{
    const { dispatch, form } = this.props;
    dispatch({
        type:'productDetailTemplate/DeleteTemplate',
        payload:{
            id
        },
        callback:{
            success:()=>{
              message.success('删除成功');
              this.requestList({
                current:1
              });
            }
        }
    })
  }

  edit = (id) =>{
    //router.push(`/${window.storeId}/goods/detailtemplates/edit/${id}`);
    window.open(`/#/${window.storeId}/goods/detailtemplates/edit/${id}`)
  }

  render() {    
    const { templateList,loading,cdnUrl } = this.props; 
    const { paginationProps,loaded }  =this.state;
    return (
      <Spin spinning={!loaded}>       
        <Card className={styles.productTemplate}>
          <div style={{ marginBottom: 24 }}>
            <Button type="primary" style={{ marginRight: 16 }} onClick={this.addTemplate}>
              新增模板
            </Button>          
          </div>
          <Table
            loading={loading}
            columns={this.columns}
            dataSource={templateList}
            rowKey="Id"
            onChange={this.onChange}
            pagination={paginationProps}
          />
        </Card>
        <TemplateModal onRef={this.selectTempModal} cdnUrl={cdnUrl}/>
      </Spin>
    );
  }
}

export default connect(({ productDetailTemplate, global, loading }) => ({
    cdnUrl:global.oemInfo.cdnUrl,
    templateList:productDetailTemplate.templateList,
    loading:loading.effects['productDetailTemplate/FindTemplateListWithPage']
}))(Pagination);
